import React, { Component } from "react";

// state状态只能用来类组件里面,函数组件不能拥有自己的state
class App extends Component {
  // 只有放在state里面的东西才具有响应式
  // 1. 使用字面量定义
  // state = {
  //   msg: "hello React!",
  //   count: 10,
  // };

  // 2. 在构造函数的构造器里面定义state
  // constructor一个特殊的函数，当这个类被实例化的时候，这个函数就会自动的执行
  constructor() {
    // 调用super相当于调用了父类的constructor
    super();
    this.state = {
      msg: "hello React!",
      count: 10,
      show: true,
      list: [1, 2, 3, 4, 5],
    };
  }

  render() {
    const { msg, count, show, list } = this.state;
    return (
      <>
        <h3>state</h3>
        <p>{msg}</p>
        <p>{count}</p>
        {/* 条件渲染 */}
        {/* {show ? <p>希望世界和平</p> : null} */}
        {show && <p>希望世界和平</p>}

        {/* 循环渲染 */}
        <ul>
          {list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
